<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <meta name="keywords" content="" />  
	<meta name="description" content="" />  
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />  
	<meta name="format-detection" content="telephone=no" />  
	<meta name="apple-mobile-web-app-capable" content="yes" />  
	<meta name="apple-mobile-web-app-status-bar-style" content="black">  
	<meta name="author" content="duanliang, duanliang920.com" />  
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link type="text/css" href="css/jquery.mobile-1.4.5.min.css" rel="stylesheet">
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.mobile-1.4.5.min.js"></script>
    <style>  
	    body{font-size:62.5%;font-family:"Microsoft YaHei",Arial; overflow-x:hidden; overflow-y:auto;}  
	    .viewport{ max-width:640px; min-width:300px; margin:0 auto;}  
	</style>  
</head>
<body>
<div data-role="page">
    <div data-role="header">
        <h1>欢迎来到我的主页</h1>
    </div>

    <h1>&nbsp;</h1>
  
  <div data-role="panel" id="overlayPanel" data-display="overlay" data-position="right" data-position-fixed="true"> 
    <h2>覆盖面板</h2>
    <p>你可以使用按下 Esc 键、点击面板外部区域、通过滑动或点击下面按钮来关闭面板：</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-right">关闭面板</a>
  </div> 
  <div data-role="panel" id="revealPanel" data-display="reveal" data-position="right" data-position-fixed="true"> 
    <h2>滑出面板</h2>
    <p>你可以使用按下 Esc 键、点击面板外部区域、通过滑动或点击下面按钮来关闭面板：</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">关闭面板</a>
  </div> 
   <div data-role="panel" id="pushPanel" data-display="push" data-position="right" data-position-fixed="true"> 
    <h2>推动面板</h2>
    <p>你可以使用按下 Esc 键、点击面板外部区域、通过滑动或点击下面按钮来关闭面板：</p>
    <a href="#pageone" data-rel="close" class="ui-btn ui-btn-inline ui-shadow ui-corner-all ui-btn-a ui-icon-delete ui-btn-icon-left">关闭面板</a>
  </div> 

  <div data-role="main" class="ui-content">
    <p>点击以下按钮查看面板的不同展示方式。</p>
    <a href="#overlayPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">覆盖面板</a>
     <a href="#revealPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">滑出面板</a>
      <a href="#pushPanel" class="ui-btn ui-btn-inline ui-corner-all ui-shadow">推动面板</a>
      
    <table data-role="table" data-mode="columntoggle" class="ui-responsive ui-shadow" id="myTable">
      <thead>
        <tr>
          <th data-priority="6">CustomerID</th>
          <th>CustomerName</th>
          <th data-priority="1">ContactName</th>
          <th data-priority="2">Address</th>
          <th data-priority="3">City</th>
          <th data-priority="4">PostalCode</th>
          <th data-priority="5">Country</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>1</td>
          <td>Alfreds Futterkiste</td>
          <td>Maria Anders</td>
          <td>Obere Str. 57</td>
          <td>Berlin</td>
          <td>12209</td>
          <td>Germany</td>
        </tr>
        <tr>
          <td>2</td>
          <td>Antonio Moreno Taquer</td>
          <td>Antonio Moreno</td>
          <td>Mataderos 2312</td>
          <td>Mico D.F.</td>
          <td>05023</td>
          <td>Mexico</td>
        </tr>
        <tr>
          <td>3</td>
          <td>Around the Horn</td>
          <td>Thomas Hardy</td>
          <td>120 Hanover Sq.</td>
          <td>London</td>
          <td>WA1 1DP</td>
          <td>UK</td>
        </tr>
        <tr>
          <td>4</td>
          <td>Berglunds snabbk</td>
          <td>Christina Berglund</td>
          <td>Berguvsven 8</td>
          <td>Lule</td>
          <td>S-958 22</td>
          <td>Sweden</td>
        </tr>

      </tbody>
    </table>  
    <h3>慢慢重置窗口大小。布局会根据浏览器的宽度变化自适应大小。</h3>
    <div class="ui-grid-b ui-responsive">
      <div class="ui-block-a">
        <a href="#" class="ui-btn ui-corner-all ui-shadow">第一列按钮</a><br>
        <span>第一列: 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。</span>
      </div>
      <div class="ui-block-b">
        <a href="#" class="ui-btn ui-corner-all ui-shadow">第二列按钮</a><br>
        <span>第二列: 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。</span>
      </div>
      <div class="ui-block-c">
        <a href="#" class="ui-btn ui-corner-all ui-shadow">第三列按钮</a><br>
        <span>第三列: 这是一些文本。 这是一些文本。 这是一些文本。 这是一些文本。</span>
      </div>
    </div>
      
  </div>

	
	<div data-role="main" class="ui-content">
    <div data-role="collapsible">
      <h1>点击我 - 我可以折叠！</h1>
      <p>我是可折叠的内容。</p>
      <div data-role="collapsible">
        <h1>点击我 - 我是嵌套的可折叠块！</h1>
        <p>我是嵌套的可折叠块中被展开的内容。</p>
      </div>
      <h1>点击我 - 我可以折叠！</h1>
      <p>我是可折叠的内容。</p>
      <div data-role="collapsible">
        <h1>点击我 - 我是嵌套的可折叠块！</h1>
        <p>我是嵌套的可折叠块中被展开的内容。</p>
      </div>
    </div>
  </div>
  <div data-role="main" class="ui-content">
    <div data-role="collapsible">
      <h1>点击我 - 我可以折叠！</h1>
      <p>我是可折叠的内容。</p>
      <div data-role="collapsible">
        <h1>点击我 - 我是嵌套的可折叠块！</h1>
        <p>我是嵌套的可折叠块中被展开的内容。</p>
      </div>
      <h1>点击我 - 我可以折叠！</h1>
      <p>我是可折叠的内容。</p>
      <div data-role="collapsible">
        <h1>点击我 - 我是嵌套的可折叠块！</h1>
        <p>我是嵌套的可折叠块中被展开的内容。</p>
      </div>
    </div>
  </div>
  <div data-role="main" class="ui-content">
    <div data-role="collapsible">
      <h1>点击我 - 我可以折叠！</h1>
      <p>我是可折叠的内容。</p>
      <div data-role="collapsible">
        <h1>点击我 - 我是嵌套的可折叠块！</h1>
        <p>我是嵌套的可折叠块中被展开的内容。</p>
      </div>
      <h1>点击我 - 我可以折叠！</h1>
      <p>我是可折叠的内容。</p>
      <div data-role="collapsible">
        <h1>点击我 - 我是嵌套的可折叠块！</h1>
        <p>我是嵌套的可折叠块中被展开的内容。</p>
      </div>
    </div>
  </div>
  <div data-role="main" class="ui-content">
    <div data-role="collapsible">
      <h1>点击我 - 我可以折叠！</h1>
      <p>我是可折叠的内容。</p>
      <div data-role="collapsible">
        <h1>点击我 - 我是嵌套的可折叠块！</h1>
        <p>我是嵌套的可折叠块中被展开的内容。</p>
      </div>
      <h1>点击我 - 我可以折叠！</h1>
      <p>我是可折叠的内容。</p>
      <div data-role="collapsible">
        <h1>点击我 - 我是嵌套的可折叠块！</h1>
        <p>我是嵌套的可折叠块中被展开的内容。</p>
      </div>
    </div>
  </div>

    <div data-role="footer">
        <h1>底部文本</h1>
    </div>
</div>
<!--
data-role="page" 是在浏览器中显示的页面。
data-role="header" 是在页面顶部创建的工具条 (通常用于标题或者搜索按钮)
data-role="main" 定义了页面的内容，比如文本， 图片，表单，按钮等。
"ui-content" 类用于在页面添加内边距和外边距。
data-role="footer" 用于创建页面底部工具条。
-->
</body>
</html>